<template>
	<view class="tabs">
		<view 
			class="tab-item" 
			v-for="(item, index) in tabList" 
			:key="index"
			:class="{ active: type === item.type }"
			@tap="changeTab(item.type)"
		>
			{{ item.name }}
		</view>
	</view>
	<view 
		class="content"
		@touchstart="touchStart"
		@touchend="touchEnd"
	>
		<view class="item" v-for="(item,index) in seniclist" @tap="toDetails(item.objectId)">
			<view class="pic">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="msg">
				<view class="name">{{item.name}}</view>
				<view class="intro">{{item.intro}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"

	const type = ref(1)
	const tabList = [
		
		{ name: '美食', type: 1 },
		{ name: '名人', type: 2 },
		{ name: '历史', type: 3 },
		{ name: '景点', type: 4 }
		
	]

	function changeTab(newType) {
		type.value = newType
		getSenic()
	}

	onLoad(() => {
		getSenic()
	})

	// 根据type的之获取对应的类别景点列表
	const seniclist = ref([])
	async function getSenic() {
		// Js对象
		let query = {
			"type": type.value.toString()
		}
		// js对象转换为字符串
		let queryStr = JSON.stringify(query)
		console.log(query)
		console.log(queryStr)
		let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/senicltem", {
			where: queryStr
		})
		console.log(res)
		if (res.statusCode == 200) {
			seniclist.value = res.data.results
		}
		console.log(seniclist.value)
	}

	function toDetails(id) {
		uni.navigateTo({
			url: "/pages/playDetails/playDetails?id=" + id
		})
	}

	// 添加触摸相关变量
	let startX = 0
	
	// 触摸开始
	function touchStart(e) {
		startX = e.touches[0].clientX
	}
	
	// 触摸结束
	function touchEnd(e) {
		const endX = e.changedTouches[0].clientX
		const diff = endX - startX
		
		// 找到当前类型在数组中的索引
		const currentIndex = tabList.findIndex(item => item.type === type.value)
		
		if (Math.abs(diff) > 50) {  // 滑动距离大于50才触发
			if (diff > 0 && currentIndex > 0) {
				// 向右滑，切换到前一个
				changeTab(tabList[currentIndex - 1].type)
			} else if (diff < 0 && currentIndex < tabList.length - 1) {
				// 向左滑，切换到后一个
				changeTab(tabList[currentIndex + 1].type)
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs {
	display: flex;
	justify-content: space-around;
	padding: 10px;
	border-bottom: 1px solid #eee;
	
	.tab-item {
		padding: 5px 15px;
		font-size: 16px;
		color: #666;
		
		&.active {
			color: #007AFF;
			font-weight: bold;
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				bottom: -10px;
				left: 50%;
				transform: translateX(-50%);
				width: 20px;
				height: 2px;
				background-color: #007AFF;
			}
		}
	}
}

.item {
	margin: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid #ff6b6b;
	display: flex;
	gap: 15px;
	
	.pic {
		width: 120px;
		height: 90px;
		border-radius: 8px;
		overflow: hidden;
		
		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	.msg {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 5px 0;
		
		.name {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
		
		.intro {
			font-size: 14px;
			color: #666;
			// 文本超出显示省略号
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}
}
</style>